<template>

  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
          type="info"
          plain
          icon="Sort"
          @click="toggleExpandAll"
      >展开/折叠</el-button>
    </el-col>
  </el-row>

  <el-table
      v-if="refreshTable"
      v-loading="loading"
      :data="menuList"
      row-key="menuId"
      :default-expand-all="isExpandAll"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
    <el-table-column prop="icon" label="图标" align="center" width="100">
      <template #default="scope">
        <el-icon v-if="scope.row.icon" size="24">
          <component :is="scope.row.icon"/>
        </el-icon>
      </template>
    </el-table-column>
    <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
    <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="status" label="状态" width="80">
      <template #default="scope">
        <status-tag :status="scope.row.status"/>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align="center" prop="createTime"/>
  </el-table>
</template>
<script>
import {MenuService} from "@/api/system/menu.js";
import StatusTag from "@/components/StatusTag.vue";

export default {
  name: "SystemMenu",
  components: {StatusTag},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 菜单表格树数据
      menuList: [],
      // 是否展开，默认全部折叠
      isExpandAll: false,
      // 重新渲染表格状态
      refreshTable: true,
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        menuId: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: undefined,
        isFrame: "1",
        isCache: "0",
        visible: "0",
        status: "0"
      };
    },
    async getList() {
      const {code,data} = await MenuService.GetMenuList();
      if(code === 200){
        this.menuList = data
        this.refreshTable = true;
        this.loading = false
      }
    },
    toggleExpandAll(){
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(()=>{
        this.refreshTable = true;
      })
    }
  },
  created() {
    this.getList();
  }
}
</script>
<style scoped>

</style>
